<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./utils/js/index.min.js"></script>
    <title>首页</title>
  </head>
  <body>
    <header>
      <!-- 导航栏 -->
      <nav>
        <!-- logo -->
        <div class="logo"><img src="./images/index/LOGO.png" /></div>
        <!-- 搜索框 -->
        <div class="search">
          <input
            type="search"
            name="搜索"
            id="search"
            placeholder="请输入商品名称"
          />
          <i class="iconfont icon-fangdajing"></i>
        </div>
        <!-- 城市 -->
        <div class="city">
          <select name="城市" id="city">
            <option value="广州市" checked="checked">广州市</option>
            <option value="深圳市">深圳市</option>
            <option value="上海市">上海市</option>
            <option value="北京市">北京市</option>
          </select>
          <i class="iconfont icon-xiangxia"></i>
        </div>
      </nav>
      <!-- 轮播图 -->
      <div class="banner">
        <div class="banner_imgs">
          <img src="images/index/banner1.jpg" alt="banner1" />
          <img src="images/index/banner2.jpg" alt="banner2" />
          <img src="images/index/banner3.jpg" alt="banner3" />
          <img src="images/index/banner4.jpg" alt="banner4" />
          <img src="images/index/banner5.png" alt="banner5" />
          <img src="images/index/banner1.jpg" alt="banner1" />
        </div>
        <div class="progress"><span></span></div>
      </div>
    </header>

    <!-- 设置内容区域 -->
    <main class="wrapper">
      <!-- 优惠团购 -->
      <div class="shopping">
        <!-- 优惠团购标题 -->
        <div class="label">
          <div class="left">
            <i class="iconfont icon-tuangou"></i><span>优惠团购</span>
          </div>
          <div class="right">
            <a href="javascript:;">
              <span>更多</span><i class="iconfont icon-a-xingzhuang4fuben"></i
            ></a>
          </div>
        </div>
        <!-- 优惠团购内容 -->
        <div class="shopping_content">
          <a href="javascript:;"> <img src="./images/index/图层 5.png" /></a>
          <a href="javascript:;"> <img src="./images/index/图层 6.png" /></a>
          <a href="javascript:;"> <img src="./images/index/图层 7.png" /></a>
          <a href="javascript:;"> <img src="./images/index/图层 8.png" /></a>
        </div>
      </div>

      <!-- 猜你喜欢 -->
      <div class="like">
        <!-- 猜你喜欢标题 -->
        <div class="label">
          <div class="left">
            <i class="iconfont icon-shixin"></i><span>猜你喜欢</span>
          </div>
          <div class="right">
            <a href="javascript:;">
              <span>更多</span><i class="iconfont icon-a-xingzhuang4fuben"></i
            ></a>
          </div>
        </div>
        <!-- 猜你喜欢内容 -->
        <a href="./detail.html">
          <div class="like_content">
            <div class="left"><img src="./images/index/图层 3.png" /></div>
            <div class="middle">
              <p>万岁寿司（正佳店）</p>
              <p><span>[100店通用]</span><span>双人套餐</span></p>
              <p>&yen;<span>88.00</span></p>
            </div>
            <div class="right">
              <p>&lt;<span>100</span>m</p>
              <p>已售<span>1000</span></p>
            </div>
          </div>
        </a>

        <a href="./detail.html">
          <div class="like_content">
            <div class="left"><img src="./images/index/图层 4.png" /></div>
            <div class="middle">
              <p>周黑鸭（正佳店）</p>
              <p><span>[100店通用]</span><span>双人套餐</span></p>
              <p>&yen;<span>88.00</span></p>
            </div>
            <div class="right">
              <p>&lt;<span>100</span>m</p>
              <p>已售<span>1000</span></p>
            </div>
          </div>
        </a>

        <a href="./detail.html">
          <div class="like_content">
            <div class="left"><img src="./images/index/图层 3.png" /></div>
            <div class="middle">
              <p>万岁寿司（正佳店）</p>
              <p><span>[100店通用]</span><span>双人套餐</span></p>
              <p>&yen;<span>88.00</span></p>
            </div>
            <div class="right">
              <p>&lt;<span>100</span>m</p>
              <p>已售<span>1000</span></p>
            </div>
          </div>
        </a>

        <a href="./detail.html">
          <div class="like_content">
            <div class="left"><img src="./images/index/图层 4.png" /></div>
            <div class="middle">
              <p>周黑鸭（正佳店）</p>
              <p><span>[100店通用]</span><span>双人套餐</span></p>
              <p>&yen;<span>88.00</span></p>
            </div>
            <div class="right">
              <p>&lt;<span>100</span>m</p>
              <p>已售<span>1000</span></p>
            </div>
          </div>
        </a>
        
    </main>

    <footer>
      <ul>
        <li>
          <a href="./index.html"
            ><i class="iconfont icon-shouye footer_icon"></i
            ><span>首页</span></a
          >
        </li>
        <li>
          <a href="./class.html">
            <i class="iconfont icon-fenlei footer_icon"></i><span>分类</span>
          </a>
        </li>
        <li>
          <a href="./find.html">
            <i class="iconfont icon-a-faxianzhinanzhen footer_icon"></i
            ><span>发现</span>
          </a>
        </li>
        <li>
          <a href="./home.html">
            <i class="iconfont icon-wode footer_icon"></i><span>我的</span>
          </a>
        </li>
      </ul>
    </footer>
  </body>
</html>
